<!DOCTYPE html>
<html>
<head>
<title>Electron Model Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #d3d3d3;
    background-color: #ffffff;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="400" height="350"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // Style settings
  ctx.lineWidth = 2.5;
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  // Helper function for drawing arrows
  function drawArrow(ctx, fromx, fromy, tox, toy) {
    const headlen = 10;
    const dx = tox - fromx;
    const dy = toy - fromy;
    const angle = Math.atan2(dy, dx);
    
    // line
    ctx.beginPath();
    ctx.moveTo(fromx, fromy);
    ctx.lineTo(tox, toy);
    ctx.stroke();

    // arrowhead
    ctx.beginPath();
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
    ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
    ctx.closePath();
    ctx.fill();
  }

  // Define geometry
  const cx = 170;
  const cy = 150;
  const radius_a = 70;

  // 1. Draw the circle representing the spherical shell
  ctx.beginPath();
  ctx.arc(cx, cy, radius_a, 0, 2 * Math.PI);
  ctx.stroke();

  // Set font for labels inside/around the diagram
  ctx.font = 'italic 24px serif';

  // 2. Draw charge 'e' at the center
  ctx.fillText('e', cx, cy + 15);

  // 3. Draw the z-axis
  drawArrow(ctx, cx, cy, cx + 180, cy);
  ctx.fillText('z', cx + 195, cy);

  // 4. Draw the radius 'a'
  const a_angle_deg = 130;
  const a_angle_rad = a_angle_deg * Math.PI / 180;
  const a_end_x = cx + radius_a * Math.cos(a_angle_rad);
  const a_end_y = cy + radius_a * Math.sin(a_angle_rad);
  ctx.beginPath();
  ctx.moveTo(cx, cy);
  ctx.lineTo(a_end_x, a_end_y);
  ctx.stroke();
  const a_label_x = cx + (radius_a / 2 + 10) * Math.cos(a_angle_rad);
  const a_label_y = cy + (radius_a / 2 + 10) * Math.sin(a_angle_rad);
  ctx.fillText('a', a_label_x, a_label_y);

  // 5. Draw the position vector 'r'
  const r_length = 140;
  const theta_deg = 38;
  const theta_rad = theta_deg * Math.PI / 180;
  const r_end_x = cx + r_length * Math.cos(-theta_rad);
  const r_end_y = cy + r_length * Math.sin(-theta_rad);
  drawArrow(ctx, cx, cy, r_end_x, r_end_y);
  ctx.fillText('r', r_end_x + 15 * Math.cos(-theta_rad), r_end_y + 15 * Math.sin(-theta_rad) - 5);

  // 6. Draw the angle 'θ'
  const theta_arc_radius = 45;
  ctx.beginPath();
  ctx.arc(cx, cy, theta_arc_radius, 0, -theta_rad, true); // true for counter-clockwise
  ctx.stroke();
  const theta_label_x = cx + (theta_arc_radius + 20) * Math.cos(-theta_rad / 2);
  const theta_label_y = cy + (theta_arc_radius + 20) * Math.sin(-theta_rad / 2);
  ctx.fillText('θ', theta_label_x, theta_label_y);

  // 7. Draw the velocity vector 'v << c'
  const v_y_pos = cy + 45;
  drawArrow(ctx, cx + 80, v_y_pos, cx + 20, v_y_pos);
  ctx.textAlign = 'left';
  // Use the 'much less-than' unicode symbol
  ctx.fillText('v \u226A c', cx + 85, v_y_pos);
  ctx.textAlign = 'center';

  // 8. Draw the comma-like mark
  ctx.font = '24px serif';
  ctx.fillText(',', cx - radius_a - 15, cy + radius_a + 20);

  // 9. Draw the Figure Caption
  ctx.font = 'bold 22px Times New Roman';
  ctx.fillText('Fig. 2.83', cx + 50, cy + radius_a + 60);

</script>
</body>
</html>